<template>
  <div class="tabList">
    <slot name="center"><div class="center"></div></slot>
    <slot name="icon"></slot>
    <slot name="list"><div class="title"></div></slot>
    <div class="time">{{ times }}</div>
  </div>
</template>

<script lang="ts" setup>
import utils from "@/utils/utils";
import { ref, onMounted } from "vue";
const times = ref("");
onMounted(() => {
  setInterval(() => {
    times.value = utils.day();
  }, 500);
});
</script>

<style lang="less" scoped>
.tabList {
  background-color: #3B82F6;
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  .center {
    font-size: 20px;
    margin-right: 10px;
  }
  .title {
    color: gray;
  }
  .time {
    position: absolute;
    right: 10%;
    font-size: 20px;
  }
}
</style>
